<template>
	<view>
		<view class="box">
			<view class="re">
				<!-- 规则 -->
				<!-- <image src="@/static/icon_r_05.png" class="rule_btn_pos vt"></image> -->
				<!-- <view class="rebate_compare">1</view> -->
				<view class="page_content_area">
					<view class="relative mt-[100rpx]">
						<view class="invite_now_btn">立即邀请</view>
						<button class="button_pos_opa" open-type="share" />
					</view>
					
					
						<!-- <button open-type="share" class="button_pos"></button> -->
					<!-- </button> -->
					<view class="mt-[40rpx] generate_poster_btn" @click="hbShow = true">生成海报</view>
					<view class="mt60 record_content_bg" v-if="false">
						<view class="content_box">
							<view class="flex_box aic">
								<view class="item">
									<view class="search_box">
										<view class="flex_box aic hp100">
											<image src="@/static/icon_search_2.png" class="mr15 vt"
												style="width: 32rpx; height: 33rpx;"></image>
											<view class="item"><input type="text" class="ipt_search"
													placeholder="手机号/昵称搜索" placeholder-style="color: #00C3A7;" /></view>
											<image src="@/static/icon_r_06.png" class="ml5 vt"
												style="width: 144rpx; height: 76rpx;"></image>
										</view>
									</view>
								</view>
								<image src="@/static/icon_r_07.png" class="ml15 vt"
									style="width: 84rpx; height: 76rpx;"></image>
							</view>

							<view class="data_list_scroll">

								<view class="flex_box aic pt25 pb25 fs30 fwb cor_F8F">
									<view class="w200">昵称</view>
									<view class="w150">订单</view>
									<view class="w145">成交</view>
									<view class="item">佣金</view>
								</view>

								<view class="scroll_h_auto">

									<view class="flex_box aic pt15 pb15 cor_F8F" v-for="item in 7">
										<view class="w200">
											<view class="fs30 fwb em_ell_4 ell">鱼的自行鱼的自行</view>
											<view class="mt20 fs24">138****8906</view>
										</view>
										<view class="w150 fs36 fwb">45</view>
										<view class="w145 fs36 fwb">238</view>
										<view class="item fs36 fwb">357</view>
									</view>

								</view>

							</view>

						</view>
						<!-- <image src="https://offer-1318401590.cos.ap-guangzhou.myqcloud.com/mpstatus/phs/bg_1.png"
							class="img_bg vt"></image> -->
					</view>
				</view>
				<!-- https://offer-1318401590.cos.ap-guangzhou.myqcloud.com/share/bg_invite.png-->
				<image mode="widthFix" style="width: 100vw;"
					src="../../static/index/bg_invite@2x.png"
					class="page_img_1 vt"></image>
			</view>
		</view><!-- box -->
		<view class="hb">
			<u-popup v-model="hbShow" mode="center">
				<view class="hb-warp">
					<image mode="widthFix" class="hb-image"
						:src="hbUrl">
					</image>
					<view class="hb-btn" @click="down(hbUrl)">保存至相册</view>
				</view>
			</u-popup>
		</view>

	</view>
</template>

<script setup lang="ts">
	import ljPointout from '@/components/lj-pointout/lj-pointout.vue'
	import { getIndex, offerDetail ,getHb} from '@/api/shop'
	import { onLoad, onShow, onPageScroll, onShareAppMessage } from '@dcloudio/uni-app'
	import { computed, reactive, ref, shallowRef, watch, nextTick } from 'vue'

	import { storeToRefs } from 'pinia'
	import { useUserStore } from '@/stores/user'
	const userStore = useUserStore()
	const { userInfo, isLogin } = storeToRefs(userStore)

	const hbShow = ref(false);
	const hbUrl = ref('');

	const down = (url : any) => {
		uni.downloadFile({//下载
			url: url, //图片下载地址
			success: res => {
				if (res.statusCode === 200) {
					hbShow.value = false;
					uni.saveImageToPhotosAlbum({//保存图片到系统相册。
						filePath: res.tempFilePath,//图片文件路径
						success: function () {
							uni.showToast({
								title: '图片保存成功',
								icon: 'none',
							});
						},
						fail: function (e) {
							console.log(e);
							uni.showToast({
								title: '图片保存失败',
								icon: 'none',
							});
						}
					});
				}
			}
		});
	}
	
	const getHbEnv = async() => {
		uni.showLoading({
			title:'加载中'
		})
	  let data = 	await getHb();
	  uni.hideLoading();
	  hbUrl.value = data.url;
	}
getHbEnv();

onShareAppMessage(() => {
		return {
			title: "废旧手机卖高价，就找闲品侠",
			path: '/pages/index/index?agentId=' + userInfo?._object?.userInfo?.id || 0,
		}

	})
 // actShow
</script>

<style lang="scss">
	page{
		background-color: #bfece1;
	}
	.hb {
		.u-mode-center-box {
			background-color: transparent !important;
		}
	}

	.hb-warp {
		padding: 30rpx;
		border-radius: 30rpx;

		// background-color: red;
		.hb-btn {
			height: 88rpx;
			background: #FF4907;
			border-radius: 44rpx;
			text-align: center;
			line-height: 88rpx;
			color: #fff;
			font-size: 32rpx;
			font-weight: bold;
			margin-top: 48rpx;
		}

	}

	.page_img_1 {
		width: 100%;
		height: 2390rpx;
	}

	.page_content_area {
		position: absolute;
		top: 1002rpx;
		left: 50%;
		width: 630rpx;
		transform: translateX(-50%);
		z-index: 2;
	}

	.rule_btn_pos {
		position: absolute;
		top: 304rpx;
		right: 0;
		width: 100rpx;
		height: 68rpx;
		z-index: 2;
	}

	.rebate_compare {
		position: absolute;
		top: 450rpx;
		left: 544rpx;
		width: 40rpx;
		text-align: center;
		font-size: 36rpx;
		font-weight: bold;
		color: #fff;
		z-index: 2;
	}

	.invite_btn,
	.generate_poster_btn {
		position: relative;
		height: 88rpx;
		line-height: 88rpx;
		text-align: center;
		font-size: 32rpx;
		font-weight: bold;
		color: #FF4907;
		background: #FFFFFF;
		box-shadow: 0rpx 10rpx 24rpx 0rpx rgba(0,0,0,0.08);
		border-radius: 44rpx;
		// opacity: 0;
	}
	
	.invite_now_btn {
		position: relative;
		height: 88rpx;
		line-height: 88rpx;
		text-align: center;
		font-size: 32rpx;
		font-weight: bold;
		color: #fff;
		background: #FF4907;
		border-radius: 44rpx;
		box-shadow: 0rpx 10rpx 24rpx 0rpx rgba(0,0,0,0.08);
	}
	
	.button_pos_opa {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: red;
		opacity: 0;
		z-index: 2;
	}

	.record_content_bg {
		position: relative;
		width: 697rpx;
		height: 994rpx;
		margin-left: auto;
		margin-right: auto;
	
	}

	.record_content_bg .img_bg {
		width: 697rpx;
		height: 994rpx;
	}

	.record_content_bg .content_box {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		padding: 169rpx 62rpx 0;
	}

	.search_box {
		position: relative;
		padding: 0 3rpx 0 28rpx;
		height: 78rpx;
		background: #F8FBFD;
		border-radius: 39rpx;
	}

	.ipt_search {
		position: relative;
		display: inline-block;
		line-height: 78rpx;
		text-align: left;
		font-size: 24rpx;
		font-weight: bold;
		color: #00C3A7;
		background: transparent;
		border: 0;
		outline: none;
	}

	.data_list_scroll {
		height: auto;
		margin-top: 15rpx;
	}

	.scroll_h_auto {
		max-height: 612rpx;
		overflow-y: auto;
	}
</style>